<template>
	<view>
		<xk-header :headerbg="true" :back="true" title="通行预约"></xk-header>
		<view class="containerBox" v-if="contaData.length=='0'" @refresherrefresh="pullDownRefresh">
			<u-row>
				<u-col span="2">
					<view style="margin-top: 40rpx; padding-left: 30rpx;">
						<u-icon name="account" color="#fff" size="38"></u-icon>
					</view>
				</u-col>
				<u-col span="6">
					<view class="wordcenter">
					</view>
				</u-col>
				<u-col span="4">
					<view class="">
						<view class="nocode">
							<view style="text-align: center;">当前无预约记录</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view v-else class="containerBox" v-for="(item,index) in contaData" :key="index">
			<u-row>
				<u-col span="2">
					<view class="iconbox">
						<u-icon name="account" color="#fff" size="38"></u-icon>
					</view>
				</u-col>
				<u-col span="4">
					<view class="wordcenter">
						<view>{{item.receiveOrgName}}</view>
						<view>{{item.receiver}}</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="">
						<view class="wordright">截止时间：{{item.endTime}}</view>
						<view class="code">
							<view class="code_icon">
								<u-icon name="account" color="rgb(66, 133, 235)" size="18"></u-icon>
							</view>
							<view @click="getQRcode" :data-item="item">通行二维码</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view v-if="isLoading" class="loadtext">
			<u-loading-icon mode="circle" :vertical="true" size="20" textSize="12" text="加载更多信息"
				:status="loadmoreStatus"></u-loading-icon>
		</view>
		<view v-else style="text-align: center;" class="loadtext">没有更多了</view>
		<u-popup :show="show" mode="center" customStyle="height:50%;width=60%;" :round="10" closeable @close="close"
			@open="open">
			<view class="code_title">通行二维码</view>
			<view class="code_container">
				<u--image :src="code" width="300px" height="340px"></u--image>
			</view>
		</u-popup>
		<view class="common-bottom-view">
			<view @click="createRepair" class="common-btn">立即预约</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				getStorage: this.$util.getStorage("loginInfo"),
				isLogin: this.$util.isLogin(), //
				formdata: {
					phone: this.$util.getStorage("loginInfo").phone,
					// phone:'13060976423',
					pageSize: "7",
					pageNo: "1",
					status: '1'
				},
				contaData: [],
				show: false,
				isAll: false,
				//上拉加载状态
				loadmoreStatus: 'loadmore',
				isLoading: false,
				//二维码
				code: '',
			}
		},
		onLoad() {
			console.log('getStorage', this.getStorage)
		},
		onShow() {
			this.getdatas()
		},
		onPullDownRefresh() {
			this.formdata.pageSize = '7'
			this.formdata.pageNo = '1'
			this.isAll = false
			this.getdatas()
		},
		onReachBottom() {
			if (this.isLoading) {
				this.loadmoreStatus = 'loading';
				this.isAll = true
				this.formdata.pageNo = ++this.formdata.pageNo;
				setTimeout(() => {
					this.getdatas()
				}, 1000)
			}
		},
		methods: {
			createRepair() {
				uni.navigateTo({
					url: '/pagesA/passthrough/signin'
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},
			//生成二维码
			getQRcode(e) {
				this.show = true
				let visitorId = e.currentTarget.dataset.item.visitorId
				this.$util.post({
					url: "wx/ob/visit/getPassQRcode",
					data: {
						visitorId: visitorId
					},
				}).then(res => {
					this.code = 'data:image/png;base64,' + res
				})
			},
			//获取可以通行记录
			getdatas() {
				this.$util.post({
					url: "wx/ob/visit/getVisitorRecord",
					data: this.formdata,
				}).then(res => {
					if (res.length != '0') {
						if (this.isAll) {
							this.contaData = this.contaData.concat(res)
						} else {
							this.contaData = res
						}
						for (let i = 0; i < this.contaData.length; i++) {
							this.contaData[i].startTime = moment(this.contaData[i].startTime).format(
								'YYYY-MM-DD HH:mm')
							this.contaData[i].endTime = moment(this.contaData[i].endTime).format(
								'YYYY-MM-DD HH:mm')
						}
					}
					//停止下拉刷新
					wx.stopPullDownRefresh()
					if (res.length < this.formdata.pageSize) {
						this.isLoading = false
						this.loadmoreStatus = 'nomore'
						this.isAll = false
					} else {
						this.isLoading = true
						this.loadmoreStatus = 'loading'
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.containerBox {
		width: calc(100% - 40rpx);
		height: 150rpx;
		background-color: rgb(66, 133, 235);
		margin: 20rpx 20rpx 20rpx 20rpx;
		border-radius: 8rpx;
	}

	.wordright {
		float: right;
		// text-align: right;
		color: #fff;
		padding: 15rpx 18rpx;
		margin-bottom: 15rpx;
		font-size: 20rpx;
	}

	.iconbox {
		text-align: center;
		margin-top: 8rpx;
		padding-left: 20rpx;
	}

	.wordcenter {
		margin-top: 8rpx;
		padding-left: 0rpx;
		line-height: 1.5;
		color: #fff;
		font-size: 23rpx;
	}

	.code {
		display: flex;
		background-color: #fff;
		width: 200rpx;
		height: 35rpx;
		color: rgb(66, 133, 235);
		font-size: 12px;
		font-weight: bold;
		border-radius: 8rpx;
		padding: 10rpx;
		margin-top: 60rpx;
		margin-left: 60px;
	}

	.code_icon {
		margin-left: 30rpx;
	}

	.nocode {
		color: #000;
		background-color: #fff;
		width: 200rpx;
		height: 35rpx;
		font-size: 12px;
		font-weight: bold;
		border-radius: 8rpx;
		padding: 10rpx;
		margin-top: 40rpx;
	}

	.code_title {
		text-align: center;
		font-size: 18px;
		padding: 15px 0 15px 0;
		border-bottom: 1px solid #f1f1f1;
		font-weight: bold;
		background-color: #f1f1f1;
		border-radius: 8px 8px 0 0;
	}

	.code_container {
		// padding:15px;
		// margin-top:15px;
		background-color: #f8f8f8;
		// font-size:28rpx;
		border-radius: 8px;
	}
</style>
